<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="css/vui.css"/>
		<style type="text/css">
			section {margin: 50px 0;}
			.block {width: 24px; height: 24px; float: left; margin: 0 10px; background-color: #ddd;}
		
			.tan {position: relative; width: 220px; height: 100px; background-color: #003761;}
			.tan::before {content: ''; position: absolute; bottom: -38%; left: 50%; transform: translateX(-50%); border: 19px solid; border-color: #aaa transparent transparent transparent;}
			.tan::after {content: ''; position: absolute; bottom: -32%; left: 42.5%; border: 16px solid; border-color: #000000 transparent transparent transparent;}
			
			.close {position: relative; width: 26px; height: 26px; border-radius: 100%; margin: 50px auto; background-color: #fff;}
			.close::before, .close::after {content: ''; position: absolute; top: 50%; left: 50%; width: 19px; height: 1px; background-color: #666;}
			.close::before {transform: translateX(-50%) rotate(45deg);}
			.close::after {transform: translateX(-50%) rotate(135deg);}
			
			#fullpage {position: relative; width: 100%; height: 300px;}
			#fullpage .inner {height: 100%; overflow: hidden;}
			#fullpage .inner .list {position: relative; height: 300px;}
			#fullpage .item {width: 100%; float: left; font-size: 5em; color: #eee; line-height: 300px; text-align: center; background-color: rgba(52,136,210,.7);}
			@keyframes breath{
				0% {bottom: 38px;}
				25% {bottom: 26px;}
				50% {bottom: 38px;}
				75% {bottom: 50px;}
				100% {bottom: 38px;}
			}
			/* .inner .narrow {position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%); width: 50px; height: 40px; animation: breath 2s linear infinite;} */
			#fullpage .switch {position: absolute; top: 50%; transform: translateY(-50%); width: 70px; overflow: hidden; z-index: 113;}
			#fullpage .switch.prev {left: 0; padding-right: 30px;}
			#fullpage .switch.next {right: 0; padding-left: 30px;}
			/* #fullpage .switch.prev a {background: url(../img/7.png) no-repeat center;} */
			/* #fullpage .switch.next a {background: url(../img/6.png) no-repeat center;} */
			#fullpage .switch.prev a, #fullpage .switch.next a {display: block; height: 80px; background-color: rgba(0,0,0,.2); line-height: 80px; text-decoration: none; text-align: center; color: #fff;}
			#fullpage .switch.prev a:hover, #fullpage .switch.next a:hover {background-color: rgba(0,0,0,.4);}
			
			#fullpage .indicator {position: absolute; bottom: 0; width: 100%; text-align: center; background-color: rgba(0,0,0,.3);}
			#fullpage .indicator .idt-i {display: inline-block; width: 12px; height: 12px; border-radius: 100%; margin: 15px 5px; vertical-align: middle; background-color: rgba(255,255,255,.5); font-size: 10px; color: #fff;}
			#fullpage .indicator .idt-i.active {background-color: rgba(0,0,0,.5);}
		</style>
	</head>
	<body>
		<header class="header">
			<a class="vui-back"><svg width="10" height="16" viewBox="0,0,10,16" fill="transparent"><path d="M10 0 L0 8 L10 16" stroke="currentColor"></path></svg></a>
			<a class="title">Vui</a>
			<a class="vui-menu">菜单</a>
		</header>
		<div class="container">
			<div id="fullpage">
				<div class="switch prev">
					<a href="javascript:;">上</a>
				</div>
				<div class="inner">
					<ul class="list">
						<li class="item">1</li>
						<li class="item">2</li>
						<li class="item">3</li>
					</ul>
				</div>
				<div class="switch next">
					<a href="javascript:;">下</a>
				</div>
			</div>
		<section>
			<div class="lm-title">
				<h3>轮播</h3>
				<span>Slider</span>
			</div>
			<div class="slider">
				<div class="switch prev">
					<a href="javascript:;" class=""></a>
				</div>
				<div class="inner">
					<ul class="list clearfloat">
						<li class="item">
							<a href="javascript:;">
								<div class="pic"></div>
								<div class="icon">1</div>
							</a>
						</li>
						<li class="item">
							<a href="javascript:;">
								<div class="pic"></div>
								<div class="icon">2</div>
							</a>
						</li>
						<li class="item">
							<a href="javascript:;">
								<div class="pic"></div>
								<div class="icon">3</div>
							</a>
						</li>
					</ul>
				</div>
				<div class="switch next">
					<a href="javascript:;" class=""></a>
				</div>
			</div>
			<h3>1. 图文标题</h3>
			<div class="head">
				<em class="icon"></em>
				<span class="ltxt">左侧文字</span>
				<span class="rtxt"><span class="ltxt">右侧文字</span><em class="arrow-icon"></em></span>
			</div>
			<div class="head">
				<em class="icon"></em>
				<span class="ltxt">
					<p>左侧文字</p>
					<p class="down">zuojlfajsak</p>
				</span>
				<span class="rtxt"><span class="ltxt">右侧文字</span><em class="arrow-icon"></em></span>
			</div>
		</section>
		<section>
			<h3>2. 计数器</h3>
			<div class="counter clearfloat">
				<div class="icon decrease">-</div><div class="input"><input type="text" name="counter" id="counter" value="1"></div><div class="icon increase">+</div>
			</div>
		</section>
		<section>
			<h3>3. 选项卡</h3>
			<div id="navTab">
				<a daata-indx="1" class="active"><em class="icon"></em><span>帖子</span></a>
				<a data-indx="2"><em class="icon"></em><span>短视频</span></a>
				<a data-indx="3"><em class="icon"></em><span>搭配</span></a>
			</div>
		</section>
		<section>
			<h3>4. 宫格</h3>
			<div class="grid clearfloat">
				<div class="list">
					<div class="item">
						<div class="banner">1</div>
						<h3>标题</h3>
					</div>
				</div>
				<div class="list">
					<div class="item">
						<div class="banner">2</div>
						<h3>标题</h3>
					</div>
				</div>
				<div class="list">
					<div class="item">
						<div class="banner">3</div>
						<h3>标题</h3>
					</div>
				</div>
			</div>
		</section>
		<section class="hhh">
			<h3>5. SVG</h3>
			<div class="block">
				<svg viewBox="0,0,24,24" fill="transparent">
					<path d="M0 0 L 12 10 L 24 0" stroke="#555"></path>
				</svg>
			</div>
			<div class="block">
				<svg viewBox="0,0,24,24" fill="transparent">
					<path d="M2 0 L 16 12 L 0 22" stroke="#555"></path>
				</svg>
			</div>
			<div class="block" style="border-radius: 100%;background-color: #30B2EC;">
				<svg viewBox="0,0,24,24" fill="transparent">
					<path d="M6 10 L 11 16 L 18 8" stroke="#fff" stroke-width="2px"></path>
				</svg>
			</div>
			<div class="block" style="border-radius: 100%;background-color: #30B2EC;">
				<svg viewBox="0,0,24,24">
					<path d="M6.5 6 L 17.5 17.5 M17.5 5.5 L 6.5 17.5" stroke="#fff" stroke-width="2px"></path>
				</svg>
			</div>
			<div class="block" style="border-radius: 100%;background-color: #30B2EC;" onclick="win();">
				<svg viewBox="0,0,24,24">
					<path d="M4 12 H20 M12 4 V20" stroke="#fff" stroke-width="2px"></path>
				</svg>
			</div>
		</section>
		<section>
			<div class="group" style="vertical-align: middle; height: 28px;">
				<label for="check" style="line-height: 28px;">文字</label><input type="checkbox" style="display: inline-block; width: 20px;height: 20px; vertical-align: middle;">
			</div>
			<div class="form">
				<div class="group">
					<label for=""><em class="icon"><img src="img/uname.png" ></em></label>
					<input type="text">
				</div>
				
			</div>
			<div class="close"></div>
		</section>
		<ul class="aaa">
			<li><em class="icon"><img src="img/uname.png" ></em><span class="ltxt">头像</span></li>
			<li><em class="icon"><img src="img/uname.png" ></em><span class="ltxt">头像</span></li>
		</ul>
		<div id="v_container" style="width: 200px;height: 50px;"></div>
		<script src="js/vui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {
				vui(window);
				v.counter();
				v.navTab({
					next: function(index) {
						
					}
				});
				v.swiper({
					el: '#fullpage'
				});
				v.slider({
					el: '.slider',
					len: 1,
				});
				
				
			}
		</script>
		<script type="text/javascript">
			!(function(window, document) {
				var size = 5;//设置验证码长度
				function GVerify(options) { //创建一个图形验证码对象，接收options对象为参数
					this.options = { //配置参数
						id: "", //容器
						canvasId: "verifyCanvas", //canvas的ID
						width: "100", //默认canvas宽度
						height: "30", //默认canvas高度
						type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
						code: "",
					}
					if(Object.prototype.toString.call(options) == "[object Object]"){//判断传入参数类型
						for(var i in options) { //根据传入的参数，修改默认参数值
							this.options[i] = options[i];
						}
					}else{
						this.options.id = options;
					}
					
					this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");
					this.options.letterArr = getAllLetter();

					this._init();
					this.refresh();
				}

				GVerify.prototype = {
					/**初始化方法**/
					_init: function() {
						var con = document.getElementById(this.options.id);  //...........................
						var canvas = document.createElement("canvas");
						this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";
						this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";
						canvas.id = this.options.canvasId;
						canvas.width = this.options.width;
						canvas.height = this.options.height;
						canvas.style.cursor = "pointer";
						canvas.innerHTML = "您的浏览器版本不支持canvas";
						con.appendChild(canvas);
						var parent = this;
						canvas.onclick = function(){
							parent.refresh();
						}
					},
					
					/**生成验证码**/
					refresh: function() {
						this.options.code = "";
						var canvas = document.getElementById(this.options.canvasId);
						if(canvas.getContext) {
							var ctx = canvas.getContext('2d');
						}else{
							return;
						}
						
						ctx.textBaseline = "middle";

						ctx.fillStyle = randomColor(180, 240);
						ctx.fillRect(0, 0, this.options.width, this.options.height);

						if(this.options.type == "blend") { //判断验证码类型
							var txtArr = this.options.numArr.concat(this.options.letterArr);
						} else if(this.options.type == "number") {
							var txtArr = this.options.numArr;
						} else {
							var txtArr = this.options.letterArr;
						}

						for(var i = 1; i <=size; i++) {
							var txt = txtArr[randomNum(0, txtArr.length)];
							this.options.code += txt;
							ctx.font = randomNum(this.options.height/2, this.options.height) + 'px SimHei'; //随机生成字体大小
							ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色        
							ctx.shadowOffsetX = randomNum(-3, 3);
							ctx.shadowOffsetY = randomNum(-3, 3);
							ctx.shadowBlur = randomNum(-3, 3);
							ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
							var x = this.options.width / (size+1) * i;
							var y = this.options.height / 2;
							var deg = randomNum(-30, 30);
							/**设置旋转角度和坐标原点**/
							ctx.translate(x, y);
							ctx.rotate(deg * Math.PI / 180);
							ctx.fillText(txt, 0, 0);
							/**恢复旋转角度和坐标原点**/
							ctx.rotate(-deg * Math.PI / 180);
							ctx.translate(-x, -y);
						}
						/**绘制干扰线**/
						for(var i = 0; i < 4; i++) {
							ctx.strokeStyle = randomColor(40, 180);
							ctx.beginPath();
							ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
							ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
							ctx.stroke();
						}
						/**绘制干扰点**/
						for(var i = 0; i < this.options.width/4; i++) {
							ctx.fillStyle = randomColor(0, 255);
							ctx.beginPath();
							ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
							ctx.fill();
						}
					},
					
					/**验证验证码**/
					validate: function(code){
						var code = code.toLowerCase();
						var v_code = this.options.code.toLowerCase();
						if(code == v_code){
							return true;
						}else{
							this.refresh();
							return false;
						}
					}
				}
				/**生成字母数组**/
				function getAllLetter() {
					var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
					return letterStr.split(",");
				}
				/**生成一个随机数**/
				function randomNum(min, max) {
					return Math.floor(Math.random() * (max - min) + min);
				}
				/**生成一个随机色**/
				function randomColor(min, max) {
					var r = randomNum(min, max);
					var g = randomNum(min, max);
					var b = randomNum(min, max);
					return "rgb(" + r + "," + g + "," + b + ")";
				}
				window.GVerify = GVerify;
			})(window, document);


			var verifyCode = new GVerify("v_container");
// 			document.getElementById("my_button").onclick = function(){
// 				var res = verifyCode.validate(document.getElementById("code_input").value);
// 				if(res){
// 					alert("验证正确");
// 				}else{
// 					alert("验证码错误");
// 				}
// 			}
		</script>
	</body>
</html>